<template>
  <!-- <div class="earth-block"> -->
    <div :id="`container${earthId}`"></div>
  <!-- </div> -->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import bg4 from "../../assets/images/bgx.png";

export default defineComponent({
  props: {
    series: Array,
  },
  setup(props) {

    return {
        earthId: Math.random()
    };
  },
  mounted() {
    // 获取元素
    let dom = document.getElementById(`container${this.earthId}`) as HTMLElement;
    // 初始化echarts
    let myChart = echarts.init(dom);

    // 添加上面的配置项到地球上
    myChart.setOption({
      // 图例设置
      legend: {
        selectedMode: "multiple",
        x: "right",
        y: "bottom",
        data: [],
        padding: [0, 550, 140, 0], // 填充位置,上、右、下、左
        orient: "vertical", // 排列方式，vertical:垂直排列
        textStyle: {
          color: "#fff", // 文字颜色
        },
      },
      // 地球背景色
      backgroundColor: "#041427",
      // 地球参数设置
      globe: {
        baseTexture: bg4, // 地球表面覆盖的图片,可以替换成自己想要的图片
        shading: "color", // 地球中三维图形的着色效果
        viewControl: {
          autoRotate: true, // 是否开启视角绕物体的自动旋转查看
          autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
          autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
          rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
          targetCoord: [116.46, 39.92], // 定位到北京
          maxDistance: 200,
          minDistance: 200,
        },
      },
      // 地球文字显示信息配置
      series: this.series
    });
  },
});
</script>

<style lang="scss" scoped>
.earth-block{
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
</style>
